<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>食品管理</title>
		<link rel="stylesheet" href="layui/css/layui.css"/>
		<style>
			.layui-input-span{
				padding-top: 10px;
				border: 0px;
			}
			
		</style>
	</head>
	<body>
		<!-- 从food传值进来 -->
		<script type="text/html" id="toolbarDemo">
		  <div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add"  style = "margin-top:10px;margin-left:30px;position:relative;float:left;">添加</button>
		  </div>
		</script>
		<table class="layui-hide" id="food" lay-filter="food"></table>
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		
		<div class="layui-fluid" id="addBatch" style="display:none;">
		    <div class="layui-card">
				<div class="layui-card-body" style="padding: 15px;">
					<form class="layui-form" action="" id = "addBatchForm" lay-filter="component-form-group" enctype="multipart/form-data">
						<div class="layui-form-item">
						  <label class="layui-form-label">批次名称</label>
						  <div class="layui-input-block">
						    <input type="text" name="batchname" lay-verify="required|batchname" autocomplete="off" class="layui-input">
						  </div>
						</div>
						<div class="layui-form-item">
						  <label class="layui-form-label">数量</label>
						  <div class="layui-input-block">
							<input type="text" name="sum" lay-verify="required|sum" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
						<div class="layui-form-item">
						  <label class="layui-form-label">批次图片</label>
						  <div class="layui-input-block">
						    <input type="file" name="img" lay-verify="required|img" autocomplete="off" class="layui-upload">
						  </div>
						</div>
						
						 <div class="layui-form-item layui-form-text">
						    <label class="layui-form-label">详细信息</label>
						    <div class="layui-input-block">
						      <textarea placeholder="请输入内容" class="layui-textarea" name="detail"></textarea>
						    </div>
						  </div>
						  
						<div class="layui-form-item">
						  <label class="layui-form-label">到达时间</label>
						  <div class="layui-input-block">
						    <input type="text" name="time" lay-verify="required|time" autocomplete="off" class="layui-input">
						  </div>
						</div>
						
					</form>
				</div>
			</div>
		</div>
					  
	</body>
	<script src="layui/layui.js"></script>
	<script>
		
		layui.use(['layer','table','form'],function(){
			var layer = layui.layer
			,$ = layui.$
			,table = layui.table
			
			function getFoodId(value){
				var url = document.URL.split("?")[1];
				var para = url.split("&");
				var len = para.length;
				var res = {};
				var arr = [];
				for(var i=0;i<len;i++){
				    arr = para[i].split("=");
				    res[arr[0]] = arr[1];
					
				}
				return res[value]
			}
			var foodid = getFoodId('foodid')
			//判断用户登陆情况并获得用户类型
			// $.ajax({
			// 	url: 'http://localhost:8080/foodman//',
			// 	type: 'POST',
			// 	async: false,
			// 	xhrFields: {withCredentials: true},
			// 	crossDomain: true,
			// 	processData: false, 
			// 	contentType: false, 
			// 	
			// 	success: function (info) {
			// 	  if(200 === info.code){
					//成功登录
			// 		
			// 	  } else {
					//错误状态，转向登录界面
					// layer.msg(info.msg)
					// setTimeout(function(){
					// 	window.location.href = "login.html"
					// },800);
			// 		
			// 	  }
			// 	}
			// });
			
			table.render({
			    elem: '#food'
			    ,url:'http://localhost:8080/foodman/batch/findByFoodId'
				,method:'POST'
				,where:{foodId:foodid}
				,cellMinWidth:120
				,toolbar: '#toolbarDemo'
			    ,cols: [[
			      {field:'id', title:'批次ID', fixed: 'left', unresize: true,align:'center', sort: true}
			      ,{field:'batchname', title:'批次名称',align:'center', width:120}
			      ,{field:'sum', title:'数量', width:150}
			      ,{field:'pic', title:'照片',  sort: true, templet: function(res){
			        return '<img src="http://localhost:8080/foodman/image/' + res.pic + '"></em>'
			      }}
			      ,{field:'detail', title:'具体信息', width:150}
			      ,{field:'time', title:'批次到达时间',width:120}
			      ,{title:'操作', align:'center', toolbar: '#barDemo'},
			    ]]
			    ,page: true
			  });//列表渲染结束
			
			
			table.on('tool(food)', function(obj){ 
			    var data = obj.data 
			    ,layEvent = obj.event; 
			    if(layEvent === 'del'){
			      layer.confirm('确认删除么', function(index){
			        obj.del(); //删除对应行（tr）的DOM结构
			        layer.close(index);
			        //向服务端发送删除指令
					
					$.ajax({
						url: 'http://localhost:8080/foodman/food/deleteBatch?id='+data.id,
						type: 'GET',
						async: false,
						xhrFields: {withCredentials: true},
						crossDomain: true,
						processData: false, 
						contentType: false, 
						success: function (info) {
						  if(200 === info.code){
							layer.msg(info.msg)
							setTimeout(function(){
								location.reload()
							},800);
						  } else {
							layer.msg(info.msg)
						  }
						}
					});
			      });
				  
			    } 
			  });//事件监听结束
			  
			  
			  
			  table.on('toolbar(food)', function(obj){
				if(obj.event === 'add'){
				  layer.open({
					type: 1,
					title: '添加批次',
					skin: 'layui-layer-molv',
					content: $("#addBatch"),
					btn: ['添加', '取消'],
					area:  ['82%', '90%'],
					yes: function (index, layero) {
						var form=document.querySelector("#addBatchForm");
						var formdata=new FormData(form);
						formdata.append("fromfood",foodid)
						if (formdata.get("batchname")!=null && formdata.get("sum")!=null && formdata.get("img")!=null && formdata.get("detail")!=null && formdata.get("time")!=null){
							$.ajax({
								url: 'http://localhost:8080/foodman/batch/addBatch',
								type: 'POST',
								async: false,
								xhrFields: {withCredentials: true},
								crossDomain: true,
								processData: false, 
								contentType: false, 
								data: formdata,
								success: function (info) {
								  if(200 === info.code){
									layer.msg(info.msg)
									layer.close(index)
								  } else {
									layer.msg(info.msg)
								  }
								}
							});
						}else{
							layer.msg("信息不全，请补充")
						}
						
					}
				  })
				} else{
				  layer.msg('未开放')
				}
			  });//监听添加批次的事件
			  
		})
	</script>
</html>
